<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .wrap {
            width: 600px;
            margin: 0 auto;
            background-color: #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 50px 20px;
        }

        .wrap .left {
            display: flex;
        }

        .wrap .left>div {
            margin: 0 20px;
        }

        .wrap .left>div span {
            display: block;
        }

        .wrap .right img {
            width: 80px;
        }
    </style>
</head>

<body>

    <!-- <div class="wrap">
        <div class="left">
            <div>27°C</div>
            <div>
                <span>广州</span>
                <span>中雨 空气质量 优</span>
            </div>
        </div>
        <div class="right">
            <img src="./img/中雨.png" alt="">
        </div>
    </div> -->

    <script>
        // 要求：
        // 根据参数获取不同城市的天气数据, 把获取的天气数据渲染在页面上

        // 构造函数名称:  Weather
        // 属性： data (数据)   currentWeather（当前城市的数据，初始化为null）
        // 方法：
        //  getWeather  根据参数调用该方法，比如，城市名或者id名，可以获取城市数据
        //  render      调用该方法渲染数据

        // 例如：
        // var w1 = new Weather();
        // var cur = w1.getWeather("广州");// 获取输入1
        // console.log(cur);// {tem: "27°C", city: "广州", id: 1, wea: "中雨", air: "空气质量 优", …}
        // w1.render();// 渲染数据在页面，如图所示



        // 思考：在构造函数上添加属性，在原型上添加方法。
        // 对象的成员(属性和方法)


        // 构造函数
        function Weather() {
            // 添加属性
            this.data = [
                { tem: "27°C", city: "广州", id: 1, wea: "中雨", air: "空气质量 优", src: "img/中雨.png" },
                { tem: "29°C", city: "上海", id: 2, wea: "多云", air: "空气质量 良", src: "img/多云.png" },
                { tem: "28°C", city: "北京", id: 3, wea: "晴朗", air: "空气质量 差", src: "img/晴朗.png" },
                { tem: "30°C", city: "海口", id: 4, wea: "阴天", air: "空气质量 优", src: "img/阴天.png" }
            ]
            this.currentWeather = null;
            // this.getWeather = function(){}
        }
        // 原型对象
        // 添加方法（1）

        // Weather.prototype.getWeather = function(param){

        // }

        // Object.prototype.getWeather = function (param) {

        // }
        // 添加方法（2）
        Weather.prototype.render = function () {

        }

        // 创建实例对象
        var w1 = new Weather();

        // 通过实例对象调用原型上的方法
        // w1.getWeather()
        // 实例对象(w1)
        // 首先在构造函数作用域查找成员(getWeather)，若找到了就调用
        // 若找不到，然后去当前构造函数的原型( Weather.prototype)，若找到了就调用
        // 若找不到，然后去Object构造函数的原型上查找，若找到了就调用
        // 否则，当前成员不存在，若是方法就报错，若是属性就undefined




    </script>
</body>

</html>